<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }

        .kucunshu{
            position: absolute;
            top: 10%;
            left: 35%;
            font-weight: bold;
            font-size: 16px;
            }
    </style>
</head>
<body style="background: url('/static/images/shangjiashenqingdan.jpeg');background-size: 100%;background-repeat: no-repeat; margin-top: 180px">
<div class="kucunshu">
</div>
<form class="layui-form" action="">
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">出货仓库</label>
        <div class="layui-input-block">
            <select name="repositoryId"  class="layui-input stock">

            </select>
        </div>
    </div>
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">上架数量</label>
        <div class="layui-input-inline" style="width: 240px">
            <input type="number" name="shelfCount" id="gmshu" required="" lay-verify="required" placeholder="请输入上架数量" autocomplete="off" class="layui-input ShangjiaNumber">
        </div>
    </div>
    <div class="layui-form-item" style="width: 360px">
            <label class="layui-form-label">所属货架</label>
            <div class="layui-input-block">
                <select name="storgageRack"  class="layui-input storgageRack"  lay-filter="storgageRack" lay-verify="required">
                    <option value=""></option>
                    <c:forEach items="${storgageRacksList}" var="storgageRacksList">
                        <option value="${storgageRacksList.storgageRackId}" >${storgageRacksList.storgageRackName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    <div class="layui-form-item layui-form-text" style="width: 360px">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="remarks" class="layui-textarea"></textarea>
        </div>
    </div>

    <!-- 所占容量 -->
    <input type="hidden" name="capacity" class="capacity">
    <!-- 上架商品 -->
    <input type="hidden" name="stock" value="${stock1.stockId}">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button"  id="goodsSubmit" data-type="loa" class="layui-btn  site-demo-active layui-btn-normal  layui-btn-primary" lay-submit lay-filter="addShelfApplication"><i class="layui-icon layui-icon-ok">提交申请</i></button>
            <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
        </div>
    </div>
    <div style="width: 300px;height: 40px;position: fixed;left: 50px;top: 250px;background-color: #000;padding: 30px;opacity: 0.5" id="lod">
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="margin-top: 10px">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</form>


<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
</body>

<script>
    //引入table
    layui.use(['element','laydate','table','form'],function () {
        var $ = layui.jquery
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        let element = layui.element;

        /**
         * 判断是否有选择的商品库存
         */
        $(function (){

            var stock = ${stock};
            console.log(stock);
            if (stock==null){
                //证明没有该商品库存
                layer.alert("没有该商品库存,无法上架!",{icon:2},function (index){
                    window.close();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                })
            }else if (stock.stockCount<=0){
                //证明该商品库存没了
                layer.alert("该商品库存空了,请先进货!",{icon:2},function (index){
                    window.close();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                })
                }else{
                //可上架库存
                $(".kucunshu").text("可上架库存量:"+stock.stockCount);
                //证明库存是有的,给上下拉框
                $(".stock").append('<option value='+stock.reponseTypePid+'>'+stock.reponseTypeName+'</option>');
                $(".stock").val(stock.reponseTypePid);
                form.render('select');
            }

            //上架数量框离开事件,保证上架数量不超库存数
            $(".ShangjiaNumber").blur(function(){

                //判断上架数量不能小于0
                if ($(this).val()<=0){
                    $(this).val(1);
                    layer.alert("上架数量不能小于0",{icon:2},function (index){
                        layer.close(index);
                    })
                }else{
                    //判断数量是否大于了库存数量
                    if ($(this).val()>stock.stockCount){
                        $(this).val(1);
                        $(".storgageRack").val(null);
                        form.render('select');
                        layer.alert("上架数量大于库存数量",{icon:2},function (index){
                            layer.close(index);
                        })
                    }
                }

            })
            //货架选中事件,发送异步请求根据货架id查询到货架对象
            form.on('select(storgageRack)', function(data){
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象

                //发送异步请求获取指定货架判断容量
                $.post("storgageRack/selectJSONIdStorgageRack",{storgageRackId:data.value},function (result){
                    var storgageRack = JSON.parse(result.data);
                    //获取上架数量
                    var ShangjiaNumber = $(".ShangjiaNumber").val();
                   //计算商品共占容量
                   ShangjiaNumber =  stock.capacity*ShangjiaNumber;
                   //计算货架所剩容量
                    var stockRemain =  storgageRack.goorssCapacity-storgageRack.residualCapacity;

                    //把所需容量进行赋值
                    $(".capacity").val(ShangjiaNumber);

                    console.log(ShangjiaNumber);
                    console.log(stockRemain);
                    if (ShangjiaNumber>stockRemain){
                        layer.alert("该货架所剩容量不足以放下这些商品!",{icon:2},function (index){
                            //清空货架
                            $(".storgageRack").val(null);
                            form.render('select');
                            layer.close(index);
                        })
                    }

                });


            });


            $("#lod").hide();
            form.on('submit(addShelfApplication)',function (data){
                //触发事件
                var active = {
                    loa: function(othis){
                        $("#lod").show();
                            var DISABLED = 'layui-btn-disabled';
                        if(othis.hasClass(DISABLED)){
                            return;
                        }
                        //模拟loading
                        var n = 0, timer = setInterval(function(){
                            n = n + Math.random()*10|0;
                            if(n>100){
                                n = 100;
                                clearInterval(timer);
                                othis.removeClass(DISABLED);

                                //发送异步请求,进行申请单的添加
                                $.post("shelfapplication/addShelfApplication",data.field,function (result){
                                    if (result.success){
                                        layer.alert("申请已提交",{icon:1},function (index){
                                            window.close();
                                            parent.parent.location.reload(); // 父页面刷新
                                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                        })
                                    }
                                })





                            }
                            element.progress('demo', n+'%');
                        }, 1+Math.random()*1000);

                        othis.addClass(DISABLED);
                    }

                };

                $('.site-demo-active').on('click', function(){
                    var othis = $(this), type = $(this).data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });
            })


        })

    })

</script>
</html>